<template>
  <!-- "/questiondetail/:quesid", 详细用户问答 -->
  <div class="question">
    <header>
      <van-icon name="arrow-left" size="40px" @click="onBack" />
      <div class="question-user">
        <div class="user-img">
          <img src="../../public/img/message-2.png" alt="" />
        </div>
        <div class="user-name">{{ useQueanswer.userId }}</div>
      </div>
      <van-button type="warning">关注</van-button>
    </header>
    <div class="question-content">
      <p class="question-title">{{ useQueanswer.qtitle }}?</p>
      <div class="question-ct">{{ useQueanswer.qcontext }}</div>
      <!-- <p class="question-time">{{ data5 }}</p> -->
      <p class="question-replycount">
        回答{{ useQueanswer.queAnswers.length || 0 }}条
      </p>

      <!-- 渲染回复 -->
      <div class="question-replybox">
        <div
          class="question-reply"
          v-for="(item, index) in Queanswer"
          :key="index"
        >
          <div class="reply-userbox">
            <div class="reply-user">
              <div class="user-img">
                <img src="../../public/img/message-3.png" alt="" />
              </div>
            </div>

            <div class="reply-content">
              <div class="usertime">
                <div class="user-name">{{ item.atitle }}</div>
                <div class="user-time">
                  {{ new Date(+item.ansTime).toLocaleString() }}
                </div>
              </div>
              <div class="reply-ct">{{ item.acontext }}</div>
              <div class="reply-like">
                <van-icon name="comment-o" size="18px">0</van-icon>
                <van-icon name="like-o" size="18px">0</van-icon>
              </div>
            </div>
          </div>
        </div>
      </div>
      <footer>
        <van-cell-group inset>
          <van-field v-model="reply" center placeholder="说说你的想法">
            <template #button>
              <van-button size="small" type="primary" @click="addreply(qobj)"
                >发送</van-button
              >
            </template>
          </van-field>
        </van-cell-group>
      </footer>
    </div>
  </div>
</template>

<script>
import { mapState, mapActions } from "vuex";
import { ref } from "vue";
import { postReplyApi } from "../utils/api";
export default {
  props: ["quesid"],
  data() {
    return {
      useQueanswer: JSON.parse(localStorage.getItem("qarr")),
    };
  },
  //回复
  setup() {
    const reply = ref("");
    return { reply };
  },
  methods: {
    //返回上一页
    onBack() {
      this.$router.go(-1);
    },
    //回复消息
    async addreply() {
      await postReplyApi({
        quid: "0002",
        qid: this.quesid,
        aobj: {
          atitle: "回答",
          acontext: this.reply,
        },
      });
      await this.getQueanswer({
        queid: this.quesid,
        uid: "0002",
      });
      this.reply = "";
    },
    ...mapActions(["getQueanswer"]),
  },
  computed: {
    ...mapState({ Queanswer: (state) => state.message.Queanswer }),
  },
  created() {
    this.getQueanswer({
      queid: this.quesid,
      uid: "0002",
    });
  },
};
</script>

<style lang="less">
header {
  display: flex;
  justify-content: space-between;
  padding: 5px 20px;
  align-items: center;
  background: #fff;
  .question-user {
    display: flex;
    font-size: 22px;
    align-items: center;
    .user-img {
      margin-right: 20px;
      width: 40px;
      height: 40px;
      img {
        width: 100%;
        height: 100%;
      }
    }
  }
}
.question-content {
  font-size: 18px;
  font-weight: 500;
  background: #fff;
  margin: 10px 0;
  padding: 20px 0;
  .question-title {
    padding: 0 10px;
  }
  .question-ct {
    padding: 0 10px;
    margin: 20px 0;
  }
  .question-imgbox {
    display: flex;
    justify-content: center;

    .question-img {
      width: 80px;
      height: 80px;
      img {
        width: 100%;
        height: 100px;
      }
    }
  }
  .question-time {
    color: #b7b7b7;
  }
  .question-replycount {
    color: #b7b7b7;
    margin: 0 10px;
    background: #f9f9f9;
  }
  .question-replybox {
    padding: 20px;
    .question-reply {
      margin-top: 20px;
      .reply-userbox {
        display: flex;
        justify-content: space-between;
        .reply-user {
          .user-img {
            width: 30px;
            height: 30px;
            img {
              width: 100%;
              height: 100%;
            }
          }
        }
        .reply-content {
          flex: 1;
          padding-left: 20px;
          .usertime {
            display: flex;
            justify-content: space-between;
            .user-time {
              font-size: 14px;
            }
          }
          .reply-ct {
            padding: 10px 0;
          }
          .reply-like {
            text-align: right;
          }
        }
      }
    }
  }
}
footer {
  position: fixed;
  bottom: 0px;
  left: -17px;
  right: -17px;
}
</style>
